<script setup>
import Header from '@/components/header/App.vue'
import Footer from '@/components/footer/App.vue'
import zszx from '@/assets/img/static/zszx.jpg'
import zszs from '@/assets/img/static/zszs.jpg'
import mxzs from '@/assets/img/static/mxzs.jpg'
import cjyyzx from '@/assets/img/static/cjyyzx.jpg'
import new1 from '@/assets/img/static/new1.jpg'
import new2 from '@/assets/img/static/new2.jpg'
import new3 from '@/assets/img/static/new3.jpg'
import service_icon1 from '@/assets/img/static/service_icon1.jpg'
import service_icon2 from '@/assets/img/static/service_icon2.jpg'
import service_icon3 from '@/assets/img/static/service_icon3.jpg'
import service_icon4 from '@/assets/img/static/service_icon4.jpg'
import service_icon5 from '@/assets/img/static/service_icon5.jpg'
import service_icon6 from '@/assets/img/static/service_icon6.jpg'


import { ref } from 'vue'
const serviceList = ref([
  {
    name: '智算中心',
    content: '提供高性能计算资源和智能算力支持',
    imgUrl: zszx
  },
  {
    name: '知识中枢',
    content: '整合行业知识，助力企业创新发展',
    imgUrl:zszs
  },
  {
    name: '模型中枢',
    content: '提供多样化人工智能模型服务',
    imgUrl:mxzs
  },
  {
    name: '场景应用中心',
    content: '打造多元化的智能应用场景',
    imgUrl:cjyyzx
  }])
const newsList = ref([{
  name: '濮阳市人工智能产业发展研讨会圆满举行',
  content: '来自全国各地的专家学者齐聚濮阳，共同探讨人工智能产业发展新机遇...',
  imgUrl:new1,
  time:'2024-01-15',
},
  {
    name: '示范基地与行业领军企业达成战略合作',
    content: '基地与多家人工智能领域的龙头企业签署合作协议，共同推进产业发展...',
    imgUrl:new2,
    time:'2024-01-10',
  },
  {
    name: '2024人工智能创新应用展览会开幕',
    content: '展会集中展示了最新的人工智能技术成果和应用案例，吸引众多参观者...',
    imgUrl:new3,
    time:'2024-01-05',
  }])
const serviceCapacityList = ref([{
  name: '互联网营销',
  content: '提供全方位的数字营销解决方案，阻力企业拓展市场',
  imgUrl:service_icon1,
},
  {
    name: '人才培养',
    content: '专业的人才培养体系，打造高素质技术团队',
    imgUrl:service_icon2,
  },
  {
    name: '网络安全',
    content: '全面的网络安全防护，保障数据和系统安全',
    imgUrl:service_icon3,
  },
  {
    name: '品牌建设',
    content: '专业的品牌策划和推广，提升企业形象',
    imgUrl:service_icon4,
  },
  {
    name: '金融服务',
    content: '提供多样化的金融解决方案，助力企业发展',
    imgUrl:service_icon5,
  },
  {
    name: '会务服务',
    content: '专业的会议活动策划和执行服务',
    imgUrl:service_icon6,
  }])
</script>

<template>
  <div>
    <Header></Header>
    <div class="banner-view">
      <img src="@/assets/img/static/top_bg.jpg" :alt="banner-view" class="banner-Img"/>
    </div>

    <div class="container">
      <view class="service-box">
        <h1 class="page-title">核心服务平台</h1>
        <view class="service-list">
          <view class="item" v-for="(item, index) in serviceList" :key="index">
            <img :src="item.imgUrl" :alt="item.name" class="img"/>
            <view class="title">{{item.name}}</view>
            <view class="content">{{item.content}}</view>
            <view class="btn">查看详情-></view>
          </view>
        </view>
      </view>

      <view class="service-box news-bg">
        <h1 class="page-title">新闻动态</h1>
        <view class="news-list">
          <view class="item" v-for="(item, index) in newsList" :key="index">
            <img :src="item.imgUrl" :alt="item.name" class="img1"/>
            <view class="news-content">
              <view class="btn">{{item.time}}</view>
              <view class="title">{{item.name}}</view>
              <view class="content">{{item.content}}</view>
              <view class="btn">阅读更多-></view>
            </view>
          </view>
        </view>
      </view>

      <view class="service-box">
        <h1 class="page-title">服务能力</h1>
        <view class="serviceC-list">
          <view class="item" v-for="(item, index) in serviceCapacityList" :key="index">
            <img :src="item.imgUrl" :alt="item.name" class="imgS"/>
            <view class="title">{{item.name}}</view>
            <view class="content">{{item.content}}</view>
          </view>
        </view>
      </view>
    </div>
    <Footer></Footer>
  </div>
</template>

<style scoped>
.banner-view{
  width:100%;
  margin: 0 auto;
}
.banner-Img{
  object-fit: contain;
  width:100%;
  max-height: 100%;
}
.container {
  position: relative;
  background-color: #f7f7f7;
  width:100%;
}
.box-pb{
  padding: 25px 0rpx 50px 0rpx;
  background-color: #3C62F4;
}
.page-title {
  font-size: 32px;
  text-align: center;
  margin: 40px 0;
  color: #333;
  position: relative;
}
.service-box{
  padding-bottom: 50px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0px 50px;
  gap: 30px;
}
.service-list .item{
  background-color: #f7f7f7;
  padding: 30px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-basis: calc(25% - 22.5px);
  box-sizing: border-box;

  .img1{
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    margin-bottom: 10px;
  }

  .title{
    color: #333;
    font-size: 26px;
    font-weight: 500;
  }
  .content{
    color: #999;
    font-size: 12px;
  }
  .btn{
    color: #3C62F4;
    font-size: 12px;
    margin-top: 15px;
  }
}
@media (max-width: 992px) {
  .service-list .item {
    flex-basis: calc(50% - 15px);
  }
}
@media (max-width: 576px) {
  .service-list .item {
    flex-basis: 100%;
  }
}

.news-bg{
  background-color:  #f7f7f7;
}
.news-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0px 50px;
  gap: 30px;
}
.news-list .item {
  background-color: #fff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  flex-basis: calc((100% / 3) - 20px);
  box-sizing: border-box;
  overflow: hidden;
}
.news-list .item .img {
  width: 100%;
  height: auto;
  min-height: 120px;
  object-fit: cover;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-bottom: 10px;
}
.news-list .item .news-content {
  display: flex;
  flex-direction: column;
  padding: 10px 30px 30px 30px;
  flex-grow: 1;
}
.news-list .item .news-content .title {
  color: #333;
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 8px;
}
.news-list .item .news-content .content {
  color: #999;
  font-size: 12px;
  margin-bottom: 15px;
}
.news-list .item .news-content .btn {
  color: #3C62F4;
  font-size: 12px;
  margin-top: auto;
  align-self: flex-start;
}
@media (max-width: 992px) {
  .news-list .item {
    flex-basis: calc(50% - 15px);
  }
  .news-list .item .news-content .title {
    font-size: 22px;
  }
}
@media (max-width: 576px) {
  .news-list {
    padding: 0px 20px;
    gap: 20px;
  }
  .news-list .item {
    flex-basis: 100%;
  }
  .news-list .item .img {
    min-height: 100px;
  }
}

.serviceC-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0px 50px;
  gap: 30px;
}
.serviceC-list .item {
  background-color: #f7f7f7;
  padding: 30px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-basis: calc((100% / 3) - 20px);
  box-sizing: border-box;
  text-align: center;
}
.serviceC-list .item .img {
  width: 15%;
  min-width: 50px;
  height: auto;
  margin-bottom: 10px;
  object-fit: contain;
}
.serviceC-list .item .title {
  color: #333;
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 10px;
}
.serviceC-list .item .content {
  color: #999;
  font-size: 12px;
  width: 100%;
  max-width: 230px;
}
@media (max-width: 992px) {
  .serviceC-list .item {
    flex-basis: calc(50% - 15px);
  }
  .serviceC-list .item .img {
    width: 12%;
  }
}
@media (max-width: 576px) {
  .serviceC-list {
    padding: 0px 20px;
    gap: 20px;
  }
  .serviceC-list .item {
    flex-basis: 100%;
  }
  .serviceC-list .item .img {
    width: 10%;
    min-width: 40px;
  }
}
</style>